<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <h1 class="nav-logo">我的博客</h1>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link">首页</a></li>
                <li><a href="#articles" class="nav-link">文章</a></li>
                <li><a href="#about" class="nav-link">关于</a></li>
                <li><a href="#contact" class="nav-link">联系</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- 首页区域 -->
    <header id="home" class="hero">
        <div class="hero-content">
            <h2>欢迎来到我的博客</h2>
            <p>分享知识与思考，记录生活与成长</p>
            <a href="#articles" class="cta-button">阅读文章</a>
        </div>
    </header>

    <!-- 文章列表 -->
    <main id="articles" class="blog-container">
        <h2 class="section-title">最新文章</h2>
        <div class="articles-grid">
            <!-- 文章1 -->
            <article class="blog-card">
                <div class="card-image">
                    <img src="https://picsum.photos/800/600?random=1" alt="文章图片">
                </div>
                <div class="card-content">
                    <h3>前端开发的最佳实践</h3>
                    <p class="post-meta">发布于: 2023年10月15日 | 分类: 技术</p>
                    <p>探索现代前端开发中的最佳实践和工具，提高开发效率和代码质量...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </div>
            </article>

            <!-- 文章2 -->
            <article class="blog-card">
                <div class="card-image">
                    <img src="https://picsum.photos/800/600?random=2" alt="文章图片">
                </div>
                <div class="card-content">
                    <h3>响应式设计指南</h3>
                    <p class="post-meta">发布于: 2023年10月10日 | 分类: 设计</p>
                    <p>学习如何创建在各种设备上都能完美显示的响应式网站设计...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </div>
            </article>

            <!-- 文章3 -->
            <article class="blog-card">
                <div class="card-image">
                    <img src="https://picsum.photos/800/600?random=3" alt="文章图片">
                </div>
                <div class="card-content">
                    <h3>JavaScript ES6+ 新特性</h3>
                    <p class="post-meta">发布于: 2023年10月5日 | 分类: 编程</p>
                    <p>深入了解JavaScript ES6及之后版本引入的强大新特性和语法糖...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </div>
            </article>

            <!-- 文章4 -->
            <article class="blog-card">
                <div class="card-image">
                    <img src="https://picsum.photos/800/600?random=4" alt="文章图片">
                </div>
                <div class="card-content">
                    <h3>Web性能优化技巧</h3>
                    <p class="post-meta">发布于: 2023年9月28日 | 分类: 性能</p>
                    <p>提高网站加载速度和运行效率的实用技巧和策略，提升用户体验...</p>
                    <a href="#" class="read-more">阅读更多</a>
                </div>
            </article>
        </div>
    </main>

    <!-- 关于区域 -->
    <section id="about" class="about-section">
        <div class="about-container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://picsum.photos/400/400?random=5" alt="个人照片">
                </div>
                <div class="about-text">
                    <p>你好！我是一名前端开发者和技术博客作者，热衷于分享Web开发知识和经验。</p>
                    <p>在这个博客中，我会记录学习过程、分享技术见解和探讨行业趋势。</p>
                    <p>希望我的文章能为你带来一些启发和帮助！</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系区域 -->
    <section id="contact" class="contact-section">
        <div class="contact-container">
            <h2 class="section-title">联系我</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" placeholder="请输入您的邮箱">
                </div>
                <div class="form-group">
                    <label for="message">留言</label>
                    <textarea id="message" rows="5" placeholder="请输入您的留言"></textarea>
                </div>
                <button type="submit" class="submit-btn">发送消息</button>
            </form>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2023 我的博客. 保留所有权利.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>